<template>
    <div>
        <el-row :gutter="20" class="marginTop20" v-if="data.length > 0">
            <el-col :span="12" class="boxCol hand" v-for="(item, index) in data" :key="index">
                <div @click="toDetails(item)">
                    <div class="box back151225 marginBottom20 colorFFF">
                        <div v-if="item.type != 'same_city'" class="flex align-center colorFFF size14"
                            style="width: 150px;">
                            <img alt src="@/assets/goods/userml.png" srcset width="30px" />
                            <span class="pl-4">1V1密聊</span>
                        </div>

                        <div v-else class="flex align-center colorFFF size14" style="width: 150px;">
                            <img alt src="@/assets/goods/userkj.png" srcset width="30px" />
                            <span class="pl-4">同城空降</span>
                        </div>
                        <div class="marginTop10 size14">
                            {{ item.desc }}
                        </div>
                        <el-row :gutter="10">
                            <el-col :key="key" :span="6" class="mt-5" v-for="(value, key) in item.images">
                                <el-image :preview-src-list="item.images" :src="value" class="radius10" fit="cover"
                                    style="width: 100%; height: 220px"></el-image>
                            </el-col>
                        </el-row>

                        <div class="size14 colorFFDB5C flexFS " v-if="item.week.length != 7">
                            <div v-for="(val, inx) in item.week" :key="inx" class="marginRight10">
                                {{ val | weekFormatTwo }}
                            </div>
                            <div>
                                {{ item.start_time.substring(0, 5) + '-' + item.end_time.substring(0, 5) }}
                            </div>
                        </div>

                        <div class="size14 colorFFDB5C flexFS " v-else>
                            <div class="marginRight10">
                                每天
                            </div>
                            <div>
                                {{ item.start_time.substring(0, 5) + '-' + item.end_time.substring(0, 5) }}
                            </div>
                        </div>

                        <div class="flexFS">
                            <div class="project flexFS marginTop10 size14" v-if="item.package.length > 0">
                                <span>服务项目：</span>
                                <span class="marginRight10" v-for="(val, inx) in item.package" :key="inx">
                                    {{ val.desc }}</span>
                            </div>
                        </div>
                    </div>

                </div>

            </el-col>



        </el-row>


        <div v-else>
            <el-empty  :image="empty_image"></el-empty>
        </div>
    </div>
</template>
<script>
export default {
    components: {
    },
   
    props: {
        user_id: {
            type: [Number, String]
        }
    },
    data() {
        return {
            query: {
                user_id: ""
            },
            empty_image: require('@/assets/image/empty.png'),
            data: []
        };
    },
    mounted() {
        if (this.user_id) {
            this.query.user_id = this.user_id
            this.getServiceList();
        }

    },
    methods: {
        toDetails(e) {
            let url = '/service/details?id=' + e.secret_id
            this.$router.push({ path: url })
        },
        getServiceList(id) {
            this.$request.get('/secret/index_user_page', this.query).then((res) => {
                this.data = res.secret
                console.log('組件服务', res)
            })
        },

    },
};
</script>
  
<style lang="scss" scoped>
.boxCol::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

.project {
    height: 32px;
    background: #272337;
    border-radius: 40px;
    opacity: 1;
    border: 1px solid #3F3B54;
    padding: 0 10px;
}
</style>